{% extends 'common/panel.html' %}
{% load appname %}
{% block title %}{% appname %} Help{% endblock %}

{% block panel %}

<link rel="stylesheet" href="{{MEDIA_URL}}common/css/typography.css" type="text/css" media="all" title="no title" charset="utf-8">

<style type="text/css">
    .tabs { font-size: 1.0em; }
    .help_back { font-size: 0.8em; }
</style>

<div id="helptop"></div>
<br/>
<div class="tabs">
    <ul>
        <li><a href="#tutorial"><span>Tutorial</span></a></li>
        <li><a href="#faq"><span>Frequently Asked Questions</span></a></li>
    </ul>
    <div id="tutorial">
        Download a PDF version of our Step by Step tutorial.
        <p>
        <a href="#" class="button" style="float:left;" onclick="open_tutorial();" id="tutorial"><span>Download</span></a>
    </div>
    <div id="faq">
        <div>
        {% for group in faqs_by_group %}
            <h3><a href='#group_{{ group.group_obj.id }}'>{{ group.group_obj.faq_group_name }}</a></h3>
            <ul>
            {% for faq in group.group_faqs %}
                <li><a href='#faq_{{ faq.id }}'>{{ faq.question }}</a></li>
            {% endfor %}
            </ul>
        {% endfor %}
        </div>

        <br/>

        <div>
        {% for group in faqs_by_group %}
        <h3><a name='group_{{ group.group_obj.id }}'>{{ group.group_obj.faq_group_name }}</a></h3>
            <div style='padding-left: 25px'>
            {% for faq in group.group_faqs %}
                <h3><a name='faq_{{ faq.id }}'>Q. {{ faq.question }}</a></h3>
                <p>A. {{ faq.answer|safe }} <a class="help_back" href="#helptop">&lt;&lt;back</a></p>
            {% endfor %}
            </div>
        {% endfor %}
        </div>
    </div>
</div>

<script type="text/javascript">
        madrona.onShow(function(){
            $('#faq').localScroll({
                target:'.madrona-panel'
            });
        });
        function open_tutorial() {
            window.open("{{MEDIA_URL}}/help/Tutorial.pdf");
        }
</script>

{% endblock panel %}
